<template>
  <div class="friend-circle-send">
    <div class="friend-circle-send-title">
      <p>发朋友圈</p>
    </div>

    <!-- 类型 -->
    <ul class="set-circle-type">
      <li
        class="circle-type-item"
        :class="{ 'circle-type-item-select': circleType === 'text' }"
        @click="circleType = 'text'"
      >
        <img v-if="circleType === 'text'" src="../../../assets/images/circles/wenben-active.svg" alt="" />
        <img v-else src="../../../assets/images/circles/wenben.svg" alt="" />
        文本
      </li>
      <li
        class="circle-type-item"
        :class="{ 'circle-type-item-select': circleType === 'picture' }"
        @click="circleType = 'picture'"
      >
        <img v-if="circleType === 'picture'" src="../../../assets/images/circles/tupian-active.svg" alt="" />
        <img v-else src="../../../assets/images/circles/tupian.svg" alt="" />
        图片
      </li>
      <li
        class="circle-type-item"
        :class="{ 'circle-type-item-select': circleType === 'video' }"
        @click="circleType = 'video'"
      >
        <img v-if="circleType === 'video'" src="../../../assets/images/circles/shipin-active.svg" alt="" />
        <img v-else src="../../../assets/images/circles/shipin.svg" alt="" />
        视频
      </li>
      <li
        class="circle-type-item"
        :class="{ 'circle-type-item-select': circleType === 'link' }"
        @click="circleType = 'link'"
      >
        <img v-if="circleType === 'link'" src="../../../assets/images/circles/lianjie-active.svg" alt="" />
        <img v-else src="../../../assets/images/circles/lianjie.svg" alt="" />
        链接
      </li>
      <!-- <li class="can-not-select circle-log" @click="toggleLogPage">
        <p style="color: #a5a5a5">朋友圈日志</p>
        <i class="el-icon-arrow-right"></i>
      </li> -->
      <li class="circle-type-item" @click="showAndQueryResources">
        <i style="color: green; font-size: 16px; cursor: pointer" class="el-icon-folder" title="素材库"></i>
        素材库
      </li>
    </ul>

    <!-- 设置发送内容 -->
    <div class="set-send-content scroll">
      <!-- 文本 -->
      <el-input
        v-model="textContent"
        type="textarea"
        placeholder="这一刻的想法..."
        style="height: auto; width: 100%"
        maxlength="500"
        show-word-limit
        :autosize="{ minRows: 6, maxRows: 6 }"
        resize="none"
      ></el-input>
      <Expression class="qq-expression" @expressionContent="modifyContent" />

      <!-- 上传|展示 图片 -->
      <div v-if="circleType === 'picture'" class="add-pictures">
        <img
          v-if="imagesList.length === 0"
          style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
          src="../../../assets/images/circles/tianjiatupian.png"
          alt=""
        />
        <!-- 图片 -->
        <el-upload
          class="set-image-ulrs"
          :action="actionUrl"
          list-type="picture-card"
          accept=".jpg, .png, .jpeg"
          :class="{ hide: hideUpload }"
          :multiple="true"
          :limit="9"
          :file-list="imagesList"
          :data="upData"
          :show-file-list="showFileList"
          :on-change="handleImageChange"
          :before-upload="beforeImageUpload"
          :on-success="handleImageSuccess"
          :on-error="handleImageError"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleImageRemove"
          :on-exceed="handleImageExceed"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>

      <!-- 上传|展示 视频 -->
      <div v-else-if="circleType === 'video'" class="add-video">
        <template v-if="!videoUrl">
          <img src="../../../assets/images/circles/tianjiashipin.png" alt="" />
          <label class="add-video-label" for="addVideo">
            <i class="el-icon-plus"></i>
            <span style="color: #576c95; font-size: 14px">添加视频</span>
          </label>
          <input v-show="false" id="addVideo" ref="videoInputRef" type="file" accept=".mp4" @change="choseVideo" />
        </template>
        <template v-else>
          <video :src="videoUrl" controls></video>
          <div class="video-name-delete">
            <p style="margin-right: 5px" v-text="videoName"></p>
            <i class="el-icon-delete" @click="deleteVideo"></i>
          </div>
        </template>
      </div>

      <!-- 设置链接 -->
      <template v-if="circleType === 'link'">
        <!-- 图片的url -->
        <div class="set-circle-link">
          <span class="base-tips">请输入图片地址</span>
          <el-input v-model="linkImg" placeholder="请输入图片地址" maxlength="200" minlength="12" clearable></el-input>
        </div>
        <!-- 链接的title -->
        <div class="set-circle-link">
          <span class="base-tips">请输入链接标题</span>
          <el-input
            v-model="linkTitle"
            type="textarea"
            placeholder="请输入链接标题"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 6, maxRows: 6 }"
            resize="none"
          ></el-input>
        </div>
        <!-- 链接的url -->
        <div class="set-circle-link">
          <span class="base-tips">请输入链接地址</span>
          <el-input v-model="linkUrl" placeholder="请输入链接地址" maxlength="200" minlength="12" clearable></el-input>
        </div>
      </template>

      <!-- 评论窗口 -->
      <div class="set-circle-comment">
        <el-input
          v-if="addComment && showComentArea"
          v-model="comment"
          class="add-commnet-area"
          type="textarea"
          placeholder="如果有需要，请输入评论"
          maxlength="300"
          show-word-limit
          :autosize="{ minRows: 6, maxRows: 6 }"
          resize="none"
        ></el-input>
        <el-checkbox v-model="addComment" style="margin-right: 0" @change="addCommentChange">添加评论</el-checkbox>
        <p
          v-show="addComment"
          style="color: #ff9f00"
          @click="showComentArea = !showComentArea"
          v-text="showComentArea ? '收起' : '展开'"
        ></p>

        <!-- 多选 -->
        <el-checkbox v-model="moreWx" style="margin-left: 20px">选择多个微信发送</el-checkbox>
        <el-select
          v-show="moreWx"
          v-model="wechats2send"
          style="margin-left: 20px; width: 300px"
          size="mini"
          clearable
          multiple
          collapse-tags
          placeholder="请选择微信"
        >
          <el-option
            v-for="wechat in wechats"
            :key="wechat.WeChatId"
            :disabled="!wechat.IsOnline"
            :label="wechat.WeChatNick"
            :value="wechat.WeChatId"
          ></el-option>
        </el-select>

        <!-- 备注 -->
        <el-input
          v-if="sendRadio !== 'rightNow'"
          v-model="remarks"
          style="margin-left: 10px"
          clearable
          size="small"
          placeholder="请输入备注，非必须"
          maxlength="50"
          show-word-limit
        ></el-input>
      </div>
    </div>

    <!-- 操作 -->
    <div class="group-send-operation">
      <el-radio-group v-model="sendRadio">
        <el-radio style="width: 60px" :label="'rightNow'">立即开始</el-radio>
        <el-radio style="width: 60px" :label="'timing'">定时任务</el-radio>
        <el-date-picker
          v-model="refTime"
          style="width: 190px"
          type="datetime"
          placeholder="选择日期时间"
          prefix-icon="el-icon-date"
          clearable
          size="small"
          :disabled="sendRadio === 'rightNow'"
        ></el-date-picker>
      </el-radio-group>

      <div class="break-time">
        <span class="tip">间隔(分)</span>
        <el-input-number
          v-model="breakTime"
          size="small"
          controls-position="right"
          :disabled="sendRadio === 'rightNow'"
          :min="0"
          :max="30"
          style="margin: 0 5px; width: 90px"
        ></el-input-number>
      </div>

      <el-radio-group v-model="visibleType" size="small" class="can-not-select">
        <el-radio-button label="0">公开</el-radio-button>
        <!-- <el-radio-button :disabled="sendRadio === 'timing'" label="1">私密</el-radio-button> -->
        <!-- <el-radio-button :disabled="sendRadio === 'timing'" label="2">
          <span @click="friendsDialogVisible = !friendsDialogVisible">部分可见</span>
        </el-radio-button> -->
        <el-radio-button label="3">
          <span @click="friendsDialogVisible = !friendsDialogVisible">不给谁看</span>
        </el-radio-button>
      </el-radio-group>
      <el-button
        size="small"
        style="background-color: #ff9f00; color: #ffffff; border: none"
        :loading="sending"
        :disabled="sending"
        @click="postSNSNewsTask"
      >
        发送
      </el-button>
    </div>

    <!-- 日志页面 -->
    <!-- <div class="circle-log-page" :class="{ 'show-circle-log': showLogPage }">
      <CircleLog v-if="showLogPage" />
    </div> -->

    <!-- 大图dialog -->
    <el-dialog class="dialog-visible" :visible.sync="dialogVisible">
      <img v-if="circleType === 'picture'" class="circle-send-dialog" width="100%" :src="imageUrl" alt />
    </el-dialog>

    <!-- 资源dialog -->
    <el-dialog
      title="选择朋友圈素材"
      append-to-body
      class="create-circle-resource"
      :show-close="false"
      :visible.sync="showResources"
    >
      <!-- 资源列表 -->
      <el-table :data="resourcesDataList" stripe class="group-send-log-table" height="100%">
        <el-table-column label="素材类型" width="100">
          <template slot-scope="scope">
            <span v-text="tasktypeMap[scope.row.type]"></span>
          </template>
        </el-table-column>
        <el-table-column label="消息类型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.restype" v-text="restypeMap[scope.row.restype]"></span>
            <span v-else v-text="scope.row.circleType"></span>
          </template>
        </el-table-column>
        <el-table-column label="素材内容">
          <template slot-scope="scope">
            <div v-html="decodeChat(scope.row)"></div>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remarks" width="100"></el-table-column>
        <el-table-column label="创建时间" width="100">
          <template slot-scope="scope">
            <span v-text="$options.filters.transformTime2Minute(scope.row.createTime)"></span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="{ row }">
            <el-button size="small" @click="choseItem(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" style="display: flex; width: 100%; justify-content: space-between">
        <!-- 分页 -->
        <el-pagination
          style="display:flex;align-item:center;justify-content:center;margin：5px;"
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="pageSize"
          :pager-count="7"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
        <el-button
          style="background-color: #fff; border: solid #eeeeee 1px; color: #999999"
          size="small"
          @click="showResources = false"
        >
          取 消
        </el-button>
      </span>
    </el-dialog>

    <!-- 选择好友 -->
    <SlotFriends
      v-if="friendsDialogVisible"
      :dialogTilte="'发送朋友圈'"
      :action="'SendFriendCircle'"
      :currentFriend="{}"
      :friends="friends"
      :friendsDialogVisible="friendsDialogVisible"
      @closeSlotFriends="friendsDialogVisible = false"
      @handlerCheckedFriends="setFriendIdChose"
    />
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { fileUpload } from '@/utils/upload'
import SlotFriends from '@/components/slot/SlotFriends.vue'
import Expression from '@/components/expression'
import { addTaskTimeInfo, resourcesList } from '@/api/httpApi'
import { PostSNSNewsTask } from '@/api/webSocketApi'

// import CircleLog from './CircleLog.vue'

export default {
  name: 'SendFriendCircle',
  components: {
    Expression,
    SlotFriends
    // CircleLog
  },
  data() {
    return {
      remarks: '', // 备注
      visibleType: 0, // 谁可以看 0公开 1私密 2部分可见 3不给谁看
      breakTime: 0,
      circleType: 'text', // 朋友圈类型
      addComment: false, // 添加评论
      moreWx: false, // 选择多个微信
      wechats2send: [], // 选择的微信
      showComentArea: false, // 展示添加评论的text-area

      textContent: '', // 文本
      comment: '', // 评论

      imageUrls: [], // 图片
      hideUpload: false, // 隐藏图片上传按钮
      showFileList: true, // 显示图片列表
      upData: { myfile: '', packageName: 'pc' }, // 上传文件data
      imagesList: [], // 图片回显
      imageUrl: '', // 大图url
      dialogVisible: false, // 显示大图

      videoUploading: false, // 视频上传中
      videoUrl: '', // 视频地址
      videoName: '', // 视频名字

      linkUrl: 'http://xiaohua.zol.com.cn/detail60/59426.html', // 链接地址
      linkImg: 'https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture', // 链接图片
      linkTitle: '看一看，乐一乐', // 链接标题

      circleTypeTip: {
        picture: '只能上传jpg/png文件，且不超过20MB',
        video: '只能上传mp4文件，且不超过10秒',
        link: ''
      }, // 朋友圈类型提示

      sendRadio: 'rightNow', // 立即发送还是定时发送
      refTime: new Date().getTime(), // 定时发送的时间
      friendsDialogVisible: false, // 展示选择好友的dialog
      friendIdChose: [], // 要发送的好友id
      // showLogPage: false, // 展示日志页面
      sending: false, // 朋友圈发送中

      showResources: false, // 展示素材
      pageSize: 20,
      currentPage: 1,
      totalNum: 0,
      tasktypeMap: {
        1: '群发素材',
        2: '朋友圈素材'
      }, // 任务类型
      restypeMap: {
        Text: 1,
        Picture: 2,
        Voice: 3,
        Video: 4,
        Link: 6,
        WeApp: 13,
        1: '文本',
        2: '图片',
        3: '语音',
        4: '视频',
        6: '链接',
        13: '小程序'
      }, // 消息类型
      resourcesDataList: [] // 素材列表
    }
  },
  computed: {
    ...mapState('nedb', {
      labels: 'labels',
      friends: 'friends'
    }),
    ...mapGetters({
      actionUrl: 'actionUrl',
      currentUser: 'currentUser',
      wechats: 'conversation/wechats',
      currentWeChatId: 'conversation/currentWeChatId'
    })
  },
  watch: {
    currentWeChatId() {
      this.visibleType = 0
      this.friendIdChose = []
    }
  },
  mounted() {
    // 默认选择所有在线的微信
    this.wechats.forEach((x) => {
      if (x.IsOnline) {
        this.wechats2send.push(x.WeChatId)
      }
    })
  },
  methods: {
    // 切换显示日志页面
    // toggleLogPage() {
    //   this.showLogPage = !this.showLogPage
    // },
    // 展示/隐藏评论框
    addCommentChange(val) {
      this.showComentArea = !!val
    },
    // 处理返回的好友数据
    setFriendIdChose(friendsData) {
      this.friendIdChose = friendsData
    },
    // 定时发送朋友圈
    sendCircleByJava(message) {
      addTaskTimeInfo(message)
        .then((res) => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '创建定时任务成功！',
              duration: 1000
            })
          } else {
            this.$message({
              type: 'error',
              message: '创建定时任务失败！',
              duration: 1000
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 定时群发 时间转换
    transformTime(times) {
      const date = new Date(times)
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // let s = date.getSeconds()
      const time = Y + M + D + h + m
      return time
    },
    // 发朋友圈
    postSNSNewsTask() {
      // 表单验证
      if (this.circleType === 'text' && !this.textContent) {
        this.$message.warning('请设置文本内容!')
        return
      } else if (this.circleType === 'picture' && this.imageUrls.length === 0) {
        this.$message.warning('请设置图片!')
        return
      } else if (this.circleType === 'video' && !this.videoUrl) {
        this.$message.warning('请设置视频!')
        return
      } else if (this.circleType === 'link' && (!this.linkUrl || !this.linkImg || !this.linkTitle)) {
        this.$message.warning('请设置链接参数!')
        return
      }
      // 谁可以看
      const visible = {
        Type: this.visibleType,
        Labels: '',
        Friends: ''
      }
      if (this.sendRadio === 'timing' && (this.visibleType === '1' || this.visibleType === '2')) {
        this.$message.warning('定时发朋友圈,只能设置 公开 或 不给谁看!')
        return
      }
      if (this.visibleType === '2' || this.visibleType === '3') {
        if (this.friendIdChose.length === 0) {
          this.$message.warning('请至少选择一个好友！')
          return
        } else {
          visible.Friends = this.friendIdChose.join(',')
        }
      }
      // 附件
      let attachment = null
      switch (this.circleType) {
        case 'picture':
          attachment = { Type: 2, Content: this.imageUrls }
          break
        case 'video':
          attachment = { Type: 3, Content: [this.videoUrl] }
          break
        case 'link':
          // 链接：[url;标题;图片url]
          attachment = { Type: 0, Content: [this.linkUrl, this.linkTitle, this.linkImg] }
          break
        default:
          break
      }

      if (this.moreWx) {
        if (this.wechats2send.length === 0) {
          this.$message.warning('请选择微信!')
          return
        }
      } else {
        if (!this.currentWeChatId) {
          this.$message.warning('请选择微信!')
          return
        }
      }
      this.$confirm('即将发送朋友圈, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 立即发送还是定时发送
          if (this.sendRadio === 'rightNow') {
            const comment = this.addComment && this.comment ? this.comment : ''
            // 单发还是多发
            if (this.moreWx) {
              for (const wi of this.wechats2send) {
                PostSNSNewsTask(wi, this.textContent, attachment, comment, visible, '')
              }
            } else {
              PostSNSNewsTask(this.currentWeChatId, this.textContent, attachment, comment, visible, '')
            }
          } else {
            const message = {
              accountid: this.currentUser.UnionId,
              tasktype: 2,
              state: 1, // 状态1开启中0已完成
              wechatId: this.currentWeChatId, // 要执行的微信号
              execute_time: this.transformTime(this.refTime), // 执行时间
              content: this.textContent, // 内容
              comment: this.addComment && this.comment ? this.comment : '', // 针对发朋友圈
              restype: attachment.Type ? attachment.Type : 1, // 资源类型(群发好友:0文字 1图片；朋友圈:0链接 2图片 3短视频)
              remarks: this.remarks
            }
            if (attachment.Type) {
              message.attachtype = attachment.Type // 附件类型
              message.attachtcontent = attachment.Content.join(',') // 附件内容
            }
            if (this.visibleType === '3') {
              message.whoinvisible = visible.Friends // 不给谁看
            }

            if (this.moreWx) {
              for (let index = 0; index < this.wechats2send.length; index++) {
                const sendData = JSON.parse(JSON.stringify(message))
                sendData.wechatId = this.wechats2send[index]
                sendData.execute_time = this.transformTime(
                  new Date(this.refTime).getTime() + this.breakTime * 60 * 1000 * index
                )
                setTimeout(() => {
                  this.sendCircleByJava(sendData)
                }, index * 1000)
              }
            } else {
              this.sendCircleByJava(message)
            }
          }
          this.sending = true
          setTimeout(() => {
            this.sending = false
          }, 3000)
        })
        .catch(() => {})
    },
    formatLabelId(LabelIds) {
      let labelIds = []
      if (LabelIds) {
        labelIds = LabelIds.split(',')
      }
      return labelIds
    },
    // 图片超出个数限制时的钩子
    handleImageExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    // 图片改变
    handleImageChange(file, fileList) {
      if (fileList.length === 9) {
        this.showFileList = true
        this.hideUpload = true
      }
    },
    // 图片类型大小验证
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isJPG) {
        this.$message.warning('上传图片只能是 JPG|PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.warning('上传图片大小不能超过 20MB!')
      }
      this.upData.myfile = file
      return isJPG && isLt2M
    },
    // 图片上传成功
    handleImageSuccess(res, file, fileList) {
      for (const fl of fileList) {
        if (fl.response) {
          fl.url = fl.response.data.url
        }
      }
      this.imagesList = fileList
      this.imageUrls.push(res.data.url)
    },
    // 图片上传失败
    handleImageError(err) {
      this.$alert(err, '文件上传失败', { type: 'error' })
      this.hideUpload = false
    },
    // 图片移除
    handleImageRemove(file, fileList) {
      const imgUrlId = this.imageUrls.indexOf(file.response.data.url)
      this.imageUrls.splice(imgUrlId, 1)
      this.hideUpload = false
      this.imagesList = fileList
    },
    // 添加视频
    choseVideo() {
      // 发送图片|视频|文件
      const fileObj = this.$refs.videoInputRef.files // 文件对象
      // 如果有选中文件
      if (fileObj[0]) {
        const file = fileObj[0]
        const isMP4 = file.type === 'video/mp4'
        const isLt2M = file.size > 0 && file.size / 1024 / 1024 < 20
        if (!isMP4) {
          this.$alert('上传视频只能是 MP4 格式!', '提示', { type: 'warning' })
          return
        }
        if (!isLt2M) {
          this.$alert('上传视频大小不能超过 20MB!', '提示', { type: 'warning' })
          return
        }
        // 验证通过
        const formdata = new FormData() // 上传
        formdata.append('myfile', file)
        const loading = this.$loading({
          lock: true,
          text: '文件上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        fileUpload(formdata)
          .then((res) => {
            this.videoName = file.name // 文件名
            this.videoUrl = res.data.url
            loading.close()
          })
          .catch((err) => {
            this.$alert(`${err}`, '文件上传失败', { type: 'error' })
            loading.close()
          })
      }
    },
    // 删除视频
    deleteVideo() {
      this.videoUrl = ''
      this.videoName = ''
    },
    // 图片|视频 大图展示
    handlePictureCardPreview(file) {
      if (this.circleType === 'picture') {
        this.imageUrl = file.url
      } else {
        this.videoUrl = file.url
      }
      this.dialogVisible = true
    },
    // 添加表情
    modifyContent(rm) {
      this.textContent = this.textContent + rm
    },
    // 查询素材
    queryResourceData() {
      resourcesList(this.currentUser.SupplierId, this.currentPage, this.pageSize, 2).then((res) => {
        if (res.code === 0 && res.data.rows) {
          this.resourcesDataList = res.data.rows.map((x) => {
            const jc = JSON.parse(x.content)
            jc.id = x.id
            jc.cid = x.cid
            jc.createTime = x.createTime
            jc.remarks = x.remarks
            return jc
          })
          this.totalNum = res.data.records || 0
        } else {
          this.resourcesDataList = []
          this.totalNum = 0
        }
      })
    },
    // 查询并展示朋友圈素材
    showAndQueryResources() {
      resourcesList(this.currentUser.SupplierId, this.currentPage, this.pageSize, 2).then((res) => {
        if (res.code === 0 && res.data.rows) {
          this.resourcesDataList = res.data.rows.map((x) => {
            const jc = JSON.parse(x.content)
            jc.id = x.id
            jc.cid = x.cid
            jc.createTime = x.createTime
            jc.type = x.type
            jc.remarks = x.remarks

            if (x.attachtype) {
              jc.attachtype = x.attachtype
            }
            if (x.attachtcontent) {
              jc.attachtcontent = x.attachtcontent
            }
            return jc
          })
          this.totalNum = res.data.records || 0
        } else {
          this.resourcesDataList = []
          this.totalNum = 0
        }
        this.showResources = true
      })
    },
    // 选择素材素材
    choseItem(row) {
      this.circleType = row.circleType
      if (row.circleType === 'picture') {
        this.imageUrls = row.attachment.Content
        this.imagesList = row.imagesList
      } else if (row.circleType === 'video') {
        this.videoUrl = row.attachment.Content
      } else if (row.circleType === 'link') {
        this.linkUrl = row.attachment.Content[0]
        this.linkTitle = row.attachment.Content[1]
        this.linkImg = row.attachment.Content[2]
      }

      if (row.content) {
        this.textContent = row.content
      }
      if (row.comment) {
        this.addComment = true
        this.comment = row.comment
      }
      this.showResources = false
    },
    // 修改pageSize
    handleSizeChange(val) {
      if (this.pageSize === val) return
      this.pageSize = val
      this.queryResourceData()
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryResourceData()
    },
    // 解析内容
    decodeChat(chat) {
      let str = ''
      // 文本
      if (chat.content) {
        str = `<p style="padding:5px;">${chat.content}</p>`
      }
      // 附件
      if (chat.circleType === 'picture') {
        for (const imgUrl of chat.attachment.Content) {
          str = str + `<img style="width:80px;" src="${imgUrl}"  alt="图片"/>`
        }
      } else if (chat.circleType === 'video') {
        str =
          str +
          `<video class="video-box" src="${chat.attachment.Content[0]}" type="video/mp4" alt="视频" controls></video>`
      } else if (chat.circleType === 'link') {
        str =
          str +
          `<a href="${chat.attachment.Content[0]}" target="_blank">
          <p style="padding:5px;">${chat.attachment.Content[1]}</p>
          </a>`
      }
      // 评论
      if (chat.comment) {
        str = str + `<p>${chat.comment}</p>`
      }
      return str
    }
  }
}
</script>

<style lang="scss" scoped>
.base-tips {
  width: 110px;
  min-width: 110px;
  font-weight: 400px;
  margin-right: 10px;
  color: $font-color-1;
  display: inline-block;
}

.friend-circle-send {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  .friend-circle-send-title {
    display: flex;
    align-items: center;
    p {
      font-size: 14px;
      padding: 10px;
      color: #333333;
      font-weight: 600;
    }
  }

  .set-circle-type {
    display: flex;
    padding: 0 10px;
    position: relative;
    .circle-type-item {
      width: 80px;
      font-size: 14px;
      color: #333333;
      padding: 5px 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
    .circle-type-item-select {
      color: #ff9f00;
      background-color: #fff7e8;
      border-radius: 15px;
    }
    .circle-log {
      position: absolute;
      right: 10px;
      top: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  .set-send-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px;
    padding: 10px;
    overflow: auto;
    border: solid #dadada 1px;

    .set-circle-link {
      display: flex;
      align-items: center;
    }

    .add-pictures {
      position: relative;
      height: 240px;
      ::v-deep .set-image-ulrs {
        width: 100%;
        // border: solid blue 1px;
        .el-upload--picture-card {
          width: 110px;
          height: 110px;
          line-height: 110px;
        }
        .el-upload-list__item {
          width: 110px;
          height: 110px;
        }
        // .el-upload-list__item-thumbnail {
        //   border: solid red 1px;
        // }
      }

      // .media-tip {
      //   position: absolute;
      //   bottom: -30px;
      //   left: 0;
      //   padding: 5px;
      //   padding-left: 0;
      // }

      ::v-deep .hide .el-upload--picture-card {
        display: none;
      }
    }

    .add-video {
      height: 240px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .add-video-label {
        cursor: pointer;
      }
      video {
        height: 210px;
        width: auto;
      }
      .video-name-delete {
        display: flex;
        align-items: center;
        height: 30px;
        min-height: 30px;
        i {
          cursor: pointer;
        }
      }
    }

    .qq-expression {
      padding: 2px;
      position: absolute;
      left: 22px;
      top: 220px;
    }

    ::v-deep .set-circle-link {
      .el-input--suffix {
        width: 50%;
      }
      .el-textarea {
        width: 50%;
      }
    }

    .set-circle-comment {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      position: relative;
      p {
        margin-left: 10px;
        cursor: pointer;
      }

      ::v-deep .add-commnet-area {
        position: absolute;
        bottom: 32px;
        .el-textarea__inner {
          background-color: #fdfdfd;
        }
      }
    }
  }

  .group-send-operation {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }

  .circle-log-page {
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    box-shadow: -2px 0 5px #888888;
  }
  .show-circle-log {
    width: 639px;
    transition-duration: 500ms;
  }

  ::v-deep .dialog-visible .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
    .circle-send-dialog {
      max-width: 500px;
      max-height: 500px;
    }
  }

  .friends-dialog {
    overflow: hidden;
    ::v-deep .el-dialog {
      width: 80%;
      height: 70%;
      display: flex;
      flex-direction: column;

      .el-dialog__body {
        flex: 1 1 auto;
        padding: 0;
        display: flex;
        overflow: hidden;
      }

      .friends-list {
        flex: 1 1 auto;
        overflow: auto;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .el-pagination {
          margin: 5px 0;
        }
      }

      .operation-box {
        width: 300px;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        padding: 10px;
        .search-input {
          width: auto;
        }
        .send-labels {
          flex: 1 1 auto;
          margin: 7px 0;
          border-radius: 4px;
          overflow: hidden;
          border: 1px solid #dcdfe6;
          .labels {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            .label {
              margin: 5px;
              cursor: pointer;
            }
          }
        }
        .operation-btns {
          //   border: solid red 1px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }

    ::v-deep .el-table {
      .cell {
        .label {
          margin: 2px;
        }
      }
    }
  }
  .filter-dialog {
    overflow: hidden;
    ::v-deep .el-dialog {
      display: flex;
      flex-direction: column;
      max-height: 70%;
      .el-dialog__body {
        height: 100%;
        padding: 0 0;
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
    }
    ::v-deep .el-table .cell {
      text-overflow: clip;
      .label {
        margin: 2px;
      }
    }
  }
}
</style>
